<template>
  <view class="container">
    <view class="example">
      <uni-forms ref="form" :model="state" :rules="rules" labelWidth="80px" label-position="top">
       <uni-forms-item label="语音名称" name="audioName">
          <uni-easyinput v-model="state.audioName" placeholder="请输入名称" />
        </uni-forms-item>
        <uni-forms-item label="语音文件" name="fileName">
          <div class="d-col-xs-9">
            <uni-easyinput v-model="state.fileName" :disabled="true" placeholder="请选择文件" />
          </div>
          <div class="d-col-xs-3" style="box-sizing:border-box;padding-left:8px;display:flex;align-items:center;">
            <u-button @click="isShowFile = true" type="default" size="mini">选择文件</u-button>
            <nk-select-file v-model="isShowFile" @confirm="handleConfirmFile" />
          </div>
        </uni-forms-item>
        <uni-forms-item label="文件地址" name="filePath">
          <uni-easyinput v-model="state.filePath" :disabled="true" placeholder="请选择文件" />
        </uni-forms-item>
       <uni-forms-item v-if="state.updateTime" label="修改时间" name="updateTime">
          <uni-easyinput :value="simpleFormat(state.updateTime)" :disabled="true" :clearable="false" />
        </uni-forms-item>
        <uni-forms-item v-if="state.createTime" label="创建时间" name="createTime">
          <uni-easyinput :value="simpleFormat(state.createTime)" :disabled="true" :clearable="false" />
        </uni-forms-item>
      </uni-forms>
      <div class="footer-fixed">
        <u-button @click="handleSubmit" class="btn-submit" type="primary">保存</u-button>
      </div>
    </view>
  </view>
</template>

<script>
  import NkSelectFile from '@/components/nk-select-file/nk-select-file.vue'
	import { parseTime } from '@/utils/ruoyi.js'
  import audioSer from '@/api/service/audio.js'
	
  export default {
    components: {
      NkSelectFile
    },
    data() {
      return {
				params: {},
        state: {
					id: null,
          audioName: "",
          fileName: "",
          filePath: "",
					createTime: '',
					updateTime: ''
        },
        isEdit: false,
        rules: {
          // audioName: {
          //   rules: [{
          //     required: true,
          //     errorMessage: '不能为空'
          //   }]
          // },
          fileName: {
            rules: [{
              required: true,
              errorMessage: '不能为空'
            }]
          }
        },
        isShowFile: false
      }
    },

    onLoad(params) {
    	this.params = params
			this.initView()
    },

    methods: {
			initView () {
				let params = this.params || {}
        if (!params.id) {
          return true
        }
        audioSer.queryList(params).then(list => {
          list = Array.isArray(list) ? list : []
          let node = list[0]
          if (node) {
            this.isEdit = true
            this.state = node
          }
        })
			},
			handleSubmit () {
				this.$refs.form.validate().then(valid => {
          if (!valid) {
            return false
          }
          let defer = Promise.resolve()
          let user = this.getCurrentUser()
          if (this.isEdit) {
            this.state.updateTime = this.simpleFormat(new Date().getTime())
            defer = audioSer.update(this.state)
          } else {
            this.state.createTime = this.simpleFormat(new Date().getTime())
            this.state.userId = user.userId
            defer = audioSer.insert(this.state)
          }
          defer.then(() => {
            this.$u.toast('操作成功')
            uni.$emit('onRefreshAudioList')
            uni.$emit('onRefreshAudioState', this.state)
            this.goBack()
          }).catch(() => {
            this.$u.toast('保存失败')
          })
				})
			},
			simpleFormat(time) {
				return parseTime(time)
			},
      // 选择文件
      handleConfirmFile (files) {
        files = Array.isArray(files) ? files : [files]
        files = files.filter(item => !!item)
        let file = files[0]
        if (file) {
          this.state.fileName = file.name
          this.state.filePath = file.url
					if (!this.state.audioName) {
						this.state.audioName = file.name
					}
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #ffffff;
  }

  .example {
    padding: 15px;
    background-color: #fff;
  }

  .segmented-control {
    margin-bottom: 15px;
  }

  .button-group {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
  }

  .form-item {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .footer-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px;
    background: #fff;
    border-top: 1px #ebeef5 solid;
    z-index: 9;
    .btn-submit {
      width: 100%;
    }
  }
  .button {
    display: flex;
    align-items: center;
    height: 35px;
    line-height: 35px;
    margin-left: 10px;
  }
	.submit {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>
